<template>
  <div
    v-if="isSuccess"
    style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center"
  >
    <a-icon type="check-circle" theme="filled" style="color: green; font-size: 40px" />
    <div class="mt24">提交成功</div>
  </div>
  <a-spin v-else :spinning="spinning" class="ph24 pb48">
    <div class="fs18 fw500 mb24 p12 ta-center" style="border-bottom: 1px solid #e8e8e8; margin-left: -24px; margin-right: -24px">
      供应商登记
    </div>
    <Collapse title="基本信息" :disabled="basicFormJson.editable" :showBtns="false">
      <DynamicForm
        v-if="basicData"
        ref="basic"
        :dataSource="basicData"
        :editable.sync="basicFormJson.editable"
        :dynamicData="{}"
        :formFields="basicFormJson.fields"
        :sortedKeys="basicFormJson.sortedKeys"
        :formConfig="{}"
        :showBtns="false"
        formLayout="vertical"
        class="pt16"
        style="max-width: 880px; margin: 0 auto"
      />
    </Collapse>
    <Collapse title="联系信息" :disabled="contactFormJson.editable" :showBtns="false">
      <DynamicForm
        v-if="contactData"
        ref="contact"
        :dataSource="contactData"
        :editable.sync="contactFormJson.editable"
        :dynamicData="{}"
        :formFields="contactFormJson['fields']"
        :sortedKeys="contactFormJson.sortedKeys"
        :formConfig="{}"
        :showBtns="false"
        formLayout="vertical"
        class="pt16"
        style="max-width: 880px; margin: 0 auto"
      />
    </Collapse>
    <Collapse title="法人信息" :disabled="corporateFormJson.editable" :showBtns="false">
      <DynamicForm
        v-if="corporateData"
        ref="corporate"
        :dataSource="corporateData"
        :editable.sync="corporateFormJson.editable"
        :dynamicData="{}"
        :formFields="corporateFormJson.fields"
        :sortedKeys="corporateFormJson.sortedKeys"
        :formConfig="{}"
        :showBtns="false"
        formLayout="vertical"
        class="pt16"
        style="max-width: 880px; margin: 0 auto"
      />
    </Collapse>
    <div v-if="mode === 'add'" class="bgc-white fixedBtn">
      <a-space>
        <a-button :disabled="spinning" type="primary" @click="saveActive">提交</a-button>
      </a-space>
    </div>
  </a-spin>
</template>
<script>
import { findFormGysReq, gysCreateReq, gysDetailReq } from "./api";
import { basicsPagesNew } from "@/utils/dynamic";
import { formatValues, deFormatValues } from "./funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      basicData: null,
      contactData: null,
      corporateData: null,
      basicFormJson: {},
      contactFormJson: {},
      corporateFormJson: {},
      isSuccess: false,
      spinning: false
    };
  },
  computed: {
    mode() {
      return this.$route.query.mode;
    },
    groupId() {
      return this.$route.query.groupId;
    },
    gysId() {
      return this.$route.query.gysId;
    },
    siteId() {
      return this.$route.query.siteId;
    },
    areaSourceMap() {
      return this.$store.state.common.areaSourceMap;
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.loadFields();
  },
  methods: {
    async saveActive() {
      this.spinning = true;
      const refs = ["basic", "contact", "corporate"];
      let list = [];
      let flag = true;
      for (let i = 0; i < refs.length; i++) {
        const ref = refs[i];
        const node = this.$refs[ref];
        if (node) {
          const res = await node.saveActive();
          if (!res.success && res.error) {
            flag = false;
          } else {
            list = [].concat(list, formatValues(res, this[`${ref}FormJson`]["fields"], this.areaSourceMap));
          }
        }
      }
      if (list.length > 0 && flag) {
        gysCreateReq({
          siteId: this.siteId,
          groupId: this.groupId,
          list
        })
          .then((res) => {
            this.isSuccess = true;
            this.spinning = false;
          })
          .catch((err) => {
            this.spinning = false;
            this.$message.error(err.message);
          });
      }
    },
    loadFields() {
      findFormGysReq({ siteId: this.siteId })
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            const mod = res.data[i];
            const obj = {
              editable: this.mode === "add",
              fields: {},
              sortedKeys: {}
            };
            const { fields, fieldKeys } = basicsPagesNew(null, mod.moduleCode, mod.formGroupFieldList);
            obj.fields = fields;
            obj.sortedKeys = fieldKeys;
            this[`${mod.moduleCode}FormJson`] = obj;
            if (this.mode === "add") {
              this[`${mod.moduleCode}Data`] = {};
            }
          }
          if (this.mode === "edit") {
            gysDetailReq(this.gysId)
              .then((res) => {
                for (let i = 0; i < res.data.length; i++) {
                  const mod = res.data[i];
                  this[`${mod.moduleCode}Data`] = deFormatValues(mod.formGroupFieldList, this[`${mod.moduleCode}FormJson`]["fields"]);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.fixedBtn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e8e8e8;
}
::v-deep {
  .ant-calendar-picker {
    width: 100%;
  }
}
</style>
